<template>
	<view>
		<!-- 消息提示 -->
		<view v-if="isShow" class="login_alert">
			{{message}}
		</view>
		<view v-else>
			<!-- 视频分类导航栏 -->
			<view>
				<scroll-view :scroll-x="true">
					<view class="tab_box">
						<view :class="{tab_active: sIndex === index,tab_item:true}" v-for="(item,index) in menuList" 
						:key="index" @click="swichTab(index,item)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 视频展示区域 -->
			<view>
				<view class="video_item" v-for="(item,index) in videoList"
				:key="index">
					<view @click="commPlay(item.data.vid,item)" class="video">
						<image :src="item.data.coverUrl"></image>
						<view class="icon_play">
							<view type="#FFFDEF" class="iconfont icon-z play"></view>
						</view>
					</view>
					<view>
						<!-- 视频标题 -->
						<view class="video_title">
							{{item.data.title}}
						</view>
						<!-- 视频的发布者、以及点赞和评论 ，分享-->
						<view class="video_info">
							<view class="video_creater">
								<image :src="item.data.creator.avatarUrl" mode="aspectFit" @click="userInfo(item.data)"></image>
								<text style="font-size: 20rpx;margin-left: 10rpx;">{{item.data.creator.nickname}}</text>
							</view>
							<view class="video_op">
								<view>
									<uni-icons type="hand-thumbsup" size="15rpx"></uni-icons>
									<text style="font-size: 20rpx;margin-left: 15rpx;">{{item.data.praisedCount}}</text>
									</view>
								<view>
									<uni-icons type="chat" size="15rpx" @click="commPlay(item.data.vid,item)"></uni-icons>
									<text style="font-size: 20rpx;margin-left: 15rpx;">{{item.data.commentCount}}</text>
									</view>
								<view><uni-icons type="more-filled" size="20rpx"></uni-icons></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {getCateList,getCateVideo,getViUrl} from '@/network/video.js'
	export default {
		data(){
			return {
				cookie:'',
				isShow:'',
				menuList:[],
				sIndex:0,
				videoList:[],
				creator:{},
				message:'',
				hotComments:[],
				comments:[],
				commShow:false,
				num:10,
				groupId:0
				}
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: (res) => {
					this.getStorage()
					this.getViCate(this.cookie)
					this.getVideo(this.groupId,this.cookie)
				}
			})
		},
		methods:{
			// 获取视频分类列表
			getViCate(cookie){
				getCateList(cookie).then(res => {
					// console.log(res)
					this.menuList = res.data.data
					this.groupId = this.menuList[0].id
					this.getVideo(this.menuList[0].id,cookie)
					// console.log(this.menuList)
				})
			},
			// 切换视频分类
			swichTab(index,item){
				this.sIndex = index
				this.groupId = item.id
				this.getVideo(item.id,this.cookie)
			},
			// 获取对应分类下的视频
			getVideo(id,cookie){
				getCateVideo(id,cookie).then(res => {
					this.videoList = []
					this.videoList = res.data.datas
					this.videoList.forEach(item => {
						getViUrl(item.data.vid).then(res => {
							 item.url = res.data.urls[0].url
						})
					})
					// console.log(this.videoList)
				})
			},
			getStorage(){
				uni.getStorage({
					key:"cookie",
					success: res => {
						this.cookie = res.data
						this.isShow = false
					},
					fail: (res) => {
						if(res.data === ''){
							this.isShow = true
							this.message = '请登录,登录后请下拉刷新'
						}
					}
				})
			},
			// 展示评论
			commPlay(vid,video){
				uni.setStorage({
					key:'videoInfo',
					data:video
				})
				uni.navigateTo({
					url:`../videocomm/VideoComm?vid=${vid}`,
					success: () => {
						this.isRefresh = false
					}
				})
			},
			// 查看用户详情
			userInfo(user){
				uni.navigateTo({
					url:`../user/user?uid=${user.creator.userId}`
				})
			}
		},
		onShow() {
			uni.startPullDownRefresh({
				success: () => {
					this.getStorage()
					this.getViCate(this.cookie)
				}
			})
			
		}
	}
</script>

<style lang="scss">
	.login_alert{
		width: 100%;
		height: calc(100vh - 80rpx);
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab_box{
		font-size: 30rpx;
		width: 1100rpx;
		padding: 0 5rpx;
		border-bottom: 1rpx solid #C0C0C0;
		display: flex;
		margin-left: 20rpx;
		justify-content: space-around;
		.tab_item{
			padding-bottom: 8rpx;
			padding-top: 20rpx;
		}
		.tab_active{
			color: #DD4A68;
			border-bottom: 5rpx solid #DD4A68;
		}
	}
	.video_item{
		text-align: center;
		padding-bottom: 35rpx;
		padding-top: 10rpx;
		position: relative;
		border-bottom: 10rpx solid #F1F1F1;
		.video{
			image{
				width: 90%;
				height: 350rpx;
				border-radius: 10rpx;
			}
			.icon_play{
				position: absolute;
				top: 150rpx;
				left: 45%;
				.play{
					font-size: 60rpx;
					color: #FFFFFF;
				}
			}
		}
		.video_title{
			width: 100%;
			padding-bottom: 20rpx;
			font-size: 25rpx;
			word-wrap: break-word;
			border-bottom: 1rpx solid #C0C0C0;
		}
		.video_info{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			image{
				width: 80rpx;
				height:80rpx;
				border-radius: 50%;
			}
			.video_creater{
				display: flex;
				justify-content: space-around;
				text-overflow: ellipsis;
				align-items: center;
			}
			.video_op{
				width: 400rpx;
				display: flex;
				justify-content: space-evenly;
			}
		}
	}
	video-comm{
		z-index: 1000;
	}
</style>
